<template>
    <div class="Modifydata">
        <div class="Modifydata-title">
            <ul>
                <li v-for="(item,index) in HeadTitle" :key="index" @click="Selectchoose(index)" :class="IsHow == index?'celected':''">{{item}}</li>
            </ul>
        </div>
        <div class="Modifydata-content" v-if="IsHow == 0">
            <label class="Head-portrait">
                <span>头像</span>
               <el-upload
                    class="avatar-uploader"
                    :action="domain"
                    :show-file-list="false"
                    :data="QiNiYun"
                    :on-success="handleAvatarSuccess">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <i>点击修改头像</i>
            </label>
            <label class="nick-name">
                <span>昵称</span>
                <input type="text" name="nick-name" v-model="nickname">
            </label>
            <label class="Dateofbirth">
                <span>出生日期</span>
                <el-date-picker v-model="Datebirth" type="date" placeholder="选择日期"></el-date-picker>
            </label>
            <label class="citys">
                <span>所在城市</span>
                <el-input v-model="citysList" placeholder="请输入内容"></el-input>
            </label>
            <label class="hometown">
                <span>故乡</span>
                 <el-input v-model="hometowns" placeholder="请输入内容"></el-input>
            </label>
            <label class="nationality">
                <span>国籍</span>
                <el-select v-model="nationalitys" placeholder="请选择">
                    <el-option v-for="item in nationality" :key="item" :label="item" :value="item"></el-option>
                </el-select>
            </label>
            <label class="masterlanguage">
                <span>掌握语言</span>
                <el-select v-model="masterlanguages" multiple placeholder="请选择(可多选)">
                    <el-option v-for="item in masterlanguage" :key="item" :label="item" :value="item"></el-option>
                </el-select>
            </label>
            <label class="Mothertongue">
                <span>母语</span>
                <el-select v-model="Mothertongues"  placeholder="请选择">
                    <el-option v-for="item in Mothertongue" :key="item" :label="item" :value="item"></el-option>
                </el-select>
            </label>
            <label class="preferences">
                <span>偏好</span>
                <el-select v-model="preferencess"  placeholder="请选择">
                    <el-option v-for="item in preferences" :key="item" :label="item" :value="item"></el-option>
                </el-select>
            </label>
            <label class="companythrough">
                <h3>
                    <span>公司经历</span>
                    <div>
                        <img src="/images/公司经历图标.png" @click="Toan" alt="">
                    </div>
                </h3>
                <div v-show="ISshowto">
                    <label class="companythrough-name">
                        <span>公司名称</span>
                        <input type="text" name="companythrough-name" v-model="companythroughname">
                    </label>
                    <label class="industry">
                        <span>行业</span>
                        <input type="text" name="industry" v-model="industry">
                    </label>
                    <label class="Periodoftime">
                        <span>时间段</span>
                        <el-date-picker v-model="Atbeginning" type="month" placeholder="任职开始"></el-date-picker>
                        <el-date-picker v-model="Attheend" type="month" placeholder="任职结束"></el-date-picker>
                    </label>
                    <label class="theposition">
                        <span>职务</span>
                        <input type="text" name="theposition" v-model="theposition">
                    </label>
                    <label class="Whetherthepublic">
                        <span>是否公开</span>
                        <el-radio v-model="Whetherthepublic" label="1">是</el-radio>
                        <el-radio v-model="Whetherthepublic" label="2">否</el-radio>
                    </label>
                </div>
            </label>
            <label class="Schoolexperience">
                <h3>
                    <span>学校经历</span>
                    <div>
                        <img src="/images/公司经历图标.png" @click="toans" alt="">
                    </div>
                </h3>
                <div v-show="studentIsShow">
                    <label class="companythrough-name">
                        <span>学校名称</span>
                        <input type="text" name="School-name" v-model="Schoolname">
                    </label> 
                    <label class="Periodoftime">
                        <span>时间段</span>
                        <el-date-picker v-model="SchoolAtbeginning" type="month" placeholder="学习开始"></el-date-picker>
                        <el-date-picker v-model="SchoolAttheend" type="month" placeholder="学习结束"></el-date-picker>
                    </label>
                    <label class="Whetherthepublic">
                        <span>是否公开</span>
                        <el-radio v-model="SchoolWhetherthepublic" label="1">是</el-radio>
                        <el-radio v-model="SchoolWhetherthepublic" label="2">否</el-radio>
                    </label>
                </div>
            </label>
            <label class="discloseinformation">
                <span>提交资料</span>
            </label>
        </div>
        <div class="Modifydata-content" v-else>
            <ul class="informationnavs">
                <li v-for="(navitem,navindex) in informationnav" 
                :key="navindex" 
                @click="Tonavs(navindex)"
                :class="informationnavindex == navindex?'navsseled':''"
                >{{navitem}}</li>
            </ul>
            <div class="passwordfor" v-if="informationnavindex ==0">
                <label class="AccountSettings">                   
                    <label class="Changepassword">
                        <span>设置密码</span>
                        <input type="password" name="nick-name" v-model="Changepassword">
                    </label>
                    <label class="Changepassword">
                        <span>确认密码</span>
                        <input type="password" name="nick-name" v-model="Confirmpassword">
                    </label>
                </label>
                <label class="discloseinformation">
                    <span @click="Changethepassword">保存设置</span>
                </label>
            </div>
            <div v-else-if="informationnavindex == 1">
                <label class="AccountSettings">
                    <label class="Mobilephonebinding">
                        <span>手机号码</span>
                        <input type="text" name="nick-name" v-model="Mobilephonebinding">
                    </label>
                    <label class="Emailaddress">
                        <span>邮箱地址</span>
                        <input type="email" name="nick-name" v-model="Emailaddress">
                    </label>
                </label>
                <label class="discloseinformation">
                    <span @click="Changethepassword">保存设置</span>
                </label>
            </div>
            <!-- <label class="Newmessagenotification">
                <span>新消息通知</span>
                <label class="Newmessagenoti">
                    <span>新消息提醒通知</span>
                    <el-radio v-model="Newmessage" label="1">是</el-radio>
                    <el-radio v-model="Newmessage" label="2">否</el-radio>
                </label>
            </label> -->
            
        </div>
    </div>
</template>
<script>
export default {
    name:'Modifydata',
    data(){
        return{
            IsHow:'',
            HeadTitle:['个人信息','账号设置'],
            imageUrl: JSON.parse(localStorage.getItem('userinfo')).avatar,
            nickname:JSON.parse(localStorage.getItem('userinfo')).nick_name,
            QiNiYun:{
                key:'avatoravatoravatoravatoravatoravaysyysysyys',
                token:''
            },
            domain: "http://up-z0.qiniup.com",
            qiniuaddr: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
            Datebirth:JSON.parse(localStorage.getItem('userinfo')).birth,
            citysList:JSON.parse(localStorage.getItem('userinfo')).city,//所在城市
            citys:'',
            hometown:['杭州','东京','江南','冬木'],//故乡
            hometowns:'',
            nationality:['中国','希腊','法国','新加坡'],//国籍
            nationalitys:'',
            masterlanguage:['中文','英语','法语','俄语','韩语','西班牙语','阿拉伯语','希腊语'],//掌握语言
            masterlanguages:'',
            Mothertongue:['中文','英语','法语','俄语','韩语','西班牙语','阿拉伯语','希腊语'],//母语
            Mothertongues:'',
            preferences:['琴','棋','书','画'],
            preferencess:'',
            companythroughname:'',//公司名称
            industry:'',//行业
            Atbeginning:'',//任职开始
            Attheend:'',//任职结束
            theposition:'',//职务
            Whetherthepublic:'1',//是否公开公司经历
            Schoolname:'',//学校名称
            SchoolAtbeginning:'',//学习开始
            SchoolAttheend:'',//学习结束
            SchoolWhetherthepublic:'1',//是否公开学校经历
            Mobilephonebinding:'',//手机号码
            Changepassword:'',//修改密码
            Confirmpassword:'',//确认密码
            Emailaddress:'',//邮箱地址
            Newmessage:'1',//新消息通知提醒
            informationnav:['密码修改','账号绑定'],
            informationnavindex:0,
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            ISshowto:false,
            studentIsShow:false
        }
    },
    mounted() {
        this.getQiniuToken();
    },
    methods:{
        Selectchoose(e){
            this.IsHow = e
        },
        Toan(){
            this.ISshowto =!this.ISshowto
        },
        toans(){
            this.studentIsShow =! this.studentIsShow
        },
        //请求后台拿七牛云token
        getQiniuToken() {
            var data ={
                key:'avatoravatoravatoravatoravatoravaysyysysyys',
                type:'pic'
            }
            this.$axios({
                method:'POST',
                url:'http://101.37.66.151:8768/eg-api/push/upload/getToken',
                data:data
            }).then((response) =>{                
                this.QiNiYun.token = response.data.data;       
            }).catch((error) =>{
                console.log(error)
            })
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        Changethepassword(){
            if(this.Mobilephonebinding == ''||this.Mobilephonebinding ==undefined){
                alert("请输入手机号")
            }else{
                let reg  = /^1[3|4|5|7|8][0-9]\d{8}$/
                if(reg.test(this.Mobilephonebinding)){
                    if(this.Changepassword == ''||this.Changepassword == undefined){
                        alert("请输入密码")
                    }else{
                        if(this.Changepassword != this.Confirmpassword){
                            alert("两次密码输入不一致")
                        }else{
                            var data = {
                                login_name : this.Mobilephonebinding,
                                login_pass:this.Changepassword
                            }
                            this.$axios({
                                method:'POST',
                                url:'http://101.37.66.151:8768/eg-api/user/user/update',
                                data:data,
                            }).then((response) =>{                
                                if(response.data.message == '成功'){
                                    alert(response.data.message)
                                    localStorage.clear()
                                    this.$router.push({path:'/'})
                                }else{
                                    alert(response.data.message)
                                }
                            }).catch((error) =>{
                                console.log(error)
                            })
                        }
                    }
                }else{
                    alert('请输入正确的手机号码')
                }
            }
        },
        Tonavs(e){
            this.informationnavindex = e
        }
    },
    created(){
       this.IsHow = this.$route.params.id
       this.Emailaddress = this.unserinfo.mail
       this.Mobilephonebinding = this.unserinfo.mobile
    }
}
</script>
<style lang="less" scoped>
    .Modifydata{
        position: relative;
        width: 100%;
        border-radius: 20px;
        background: #ffffff;
        margin: 0;
        min-height: 1041px;
    }
    .Modifydata-title{
        position: relative;
        width: 90%;
        height: 120px;
        margin: 0 auto;
        border-bottom: 1px solid #47CECF;
        ul{
            display: flex;
            list-style: none;
            align-items: center;
            height: 60px;
            width: 100%;
            padding: 0;
            padding-top: 40px;
            margin: 0;
            li{
                // width: 15%;
                height: 60px;
                line-height: 60px;
                color: #494949;
                font-size: 20px;
                cursor: pointer;
                border-bottom:4px solid white;
                &:last-child{
                    margin-left: 4%;
                }
            }
        }
    }
    .celected{
        border-bottom: 4px solid #2DC7C8!important;
        color: #2DC7C8!important;
        font-weight: bold;
    }

    /*内容样式*/
    .Modifydata-content{
        position: relative;
        width: 70%;
        margin: 0 auto;
        margin-top: 40px;
        padding-bottom: 100px;
        label{
            display: flex;
            width: 100%;
            margin-top: 40px;
            align-items: center;
            color: #3E3E3E;
            span{
                width: 10%;
                font-size: 14px;
                text-align: right;
                padding-right: 2%;
            }
        }
    }
    .Head-portrait{
        height: 174px;
        span{
            height: 174px;
            line-height: 174px;
        }
        /deep/.avatar-uploader{
            width: 174px;
            height: 174px;
        }
        .avatar{
            width: 174px;
            border-radius: 100px;
        }
        i{
            color:  #C0C0C0;
            font-size: 12px;
            width: 10%;
            height: 174px;
            line-height: 174px;
            padding-left: 4%;
        }
    }
    .nick-name,.companythrough-name,.industry,.theposition{
        height: 40px;
        input{
            width: 60%;
            height: 40px;
            padding-left: 4%;
            border:1px solid rgba(206,206,206,1);
            outline: none;
        }
    }
    .Dateofbirth{
        /deep/.el-date-editor{
            width: 64%;
            height: 40px;
        }
    }
    .nationality,.masterlanguage,.Mothertongue,.preferences{
        /deep/.el-select{
            width: 64%;
            height: 40px;
        }
    }
    .citys,.hometown{
        /deep/.el-input{
            width: 64%;
            height: 40px;
        }
    }
    .companythrough,.Schoolexperience{
        flex-wrap: wrap;
        h3{
            width: 98%;
            margin: 0 auto;
            display: flex;
            span{
                display: inline-block;
                font-size: 16px;
                width: 10%;
                text-align: left;
            }
            div{
                display: flex;
                width: 64%;
                justify-content: flex-end;
                img{
                    width: 17px;
                    height: 17px;
                    cursor: pointer;
                }
            }
        }
    }
    .companythrough>h3>span:last-child,.Schoolexperience>h3>span:last-child{
        cursor: pointer;
    }
    .companythrough>div,.Schoolexperience>div{
        width: 100%;
    }
    .Periodoftime{
        height: 40px;
        /deep/.el-date-editor{
            width: 30%;
            height: 40px;
            &:last-child{
                margin-left: 4%;
            }
        }
    }
    .Whetherthepublic{
        height: 40px;
        /deep/.el-radio{
            width: 20%;
            margin: 0;
            text-align: center;
        }
    }
    .discloseinformation{
        align-items: center;
        height: 40px;
        justify-content: center;
        span{
            width: 20%!important;
            height: 40px;
            background:rgba(58,203,204,1);
            border-radius:21px;
            line-height: 40px;
            color: #FFFFFF;
            font-size: 16px!important;
            text-align: center!important;
            cursor: pointer;
        }
    }
    .AccountSettings>span,.Newmessagenotification>span{
        font-size: 16px!important;
        font-weight: bold;
        width: 16%!important;
    }
    .AccountSettings,.Newmessagenotification{
        flex-wrap: wrap;
    }
    .Mobilephonebinding,.Changepassword,.Emailaddress{
        width: 100%;
        height: 40px;
        span{
            width: 16%!important;
        }
        input{
            width: 60%;
            height: 40px;
            padding-left: 4%;
            border:1px solid rgba(206,206,206,1);
            outline: none;
        }
    }
    .Newmessagenoti{
        width: 100%;
        height: 40px;
        span{
            width: 16%!important;
        }
        /deep/.el-radio{
            width: 20%;
            margin: 0;
            text-align: center;
        }
    }
    .informationnavs{
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        height: 60px;
        list-style: none;
        display: flex;
        justify-content: flex-end;
        border-bottom: 1px solid #dedede;
        li{
            width: 14%;
            height: 40px;
            text-align: center;
            cursor: pointer;
        }
    }
    .navsseled{
        border-bottom: 4px solid #2DC7C8 !important;
        color: #2DC7C8 !important;
        font-weight: bold;
    }
</style>